<template>
  <div class="members">
    <h2><img src="@/assets/images/VIP@2x.png" alt="会员服务">会员服务</h2>
    <div class="parent-box">
      <div class="box">
        <div class="open">
          <div class="title"><h3>开通会员</h3><span>您现在是免费会员，建议开通诚信商家会员或品牌商家会员，获得更好的权益</span></div>
          <div class="choice">
            <div v-if="shopInfo.shoptype !== '01100010'" class="credit">
              <div v-if="shopInfo.shoptype === '01100008'" class="free">
                <span class="content">诚信商家会员</span>
                <span class="to-open" @click="openDialog(0)">立即开通</span>
              </div>
              <div v-if="shopInfo.shoptype === '01100009'" class="credit-opened">
                <div class="line">
                  <span class="content">诚信商家会员</span>
                  <span class="xufei" @click="paymentDialogVisible = true" />
                </div>
                <p class="expire">会员有效期：{{ members.start | formatDate }}-{{ members.end | formatDate }}</p>
              </div>
              <p v-if="shopInfo.shoptype === '01100009'" class="opened" />
            </div>
            <div class="brand">
              <div v-if="shopInfo.shoptype === '01100008' || shopInfo.shoptype === '01100009'" class="free">
                <span class="content">品牌商家会员</span>
                <span class="to-open" @click="openDialog(1)" />
              </div>
              <div v-if="shopInfo.shoptype === '01100010'" class="brand-opened">
                <div class="line">
                  <span class="content">诚信商家会员</span>
                  <span class="xufei" @click="paymentDialogVisible = true" />
                </div>
                <p class="expire">会员有效期：{{ members.start | formatDate }}-{{ members.end | formatDate }}</p>
              </div>
              <p v-if="shopInfo.shoptype === '01100010'" class="opened" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 对比表格 -->
    <div class="parent-box">
      <div class="box">
        <div class="rights">
          <div class="title"><h3>会员权益</h3></div>
          <template>
            <el-table
              :data="tableData"
              style="width: 100%"
              border
              stripe
              header-row-class-name="tb-header"
            >
              <el-table-column
                prop="name"
                label="权益内容"
                align="center"
              />
              <el-table-column
                prop="free"
                label="免费会员"
                width="180"
                align="center"
              />
              <el-table-column
                prop="credit"
                label="诚信商家会员"
                width="180"
                align="center"
                label-class-name="credit-label"
              />
              <el-table-column
                prop="brand"
                label="品牌商家会员"
                width="180"
                align="center"
                label-class-name="brand-label"
              />
            </el-table>
          </template>
        </div>
      </div>
    </div>

    <!-- 支付弹框 -->
    <el-dialog
      v-el-drag-dialog
      :visible.sync="paymentDialogVisible"
      class="payment-dialog"
      center
    >
      <h2 slot="title" class="dialog-title">您正在开通{{ payCondition.type === 1 ? '诚信商家会员' : '品牌商家会员' }}会员</h2>
      <div class="dialog-box">
        <div class="info-box">
          <p class="title">{{ payCondition.type === 1 ? '诚信商家会员' : '品牌商家会员' }}</p>
          <p class="price"><span>{{ payCondition.price }}</span>元/年</p>
          <p class="tips">另需缴纳保证金{{ payCondition.deposit }}元</p>
        </div>
        <div class="check"><el-checkbox v-model="agreeTreaty">我已同意并阅读</el-checkbox> <span class="treaty">《佰材网会员协议》</span><span class="treaty">《佰材网保证金协议》</span></div>
        <div class="payment-box">
          <p>支付方式：</p>
          <ul class="payment-list">
            <li v-for="(payment, index) in payments" :key="index" :class="{'on': index === paymentIndex}" @click="selectPayment(payment, index)"><i class="el-icon-check" /><img :src="payment.logo" :alt="payment.label"><span>{{ payment.label }}</span></li>
          </ul>
        </div>
        <p class="total-price">应付金额：<span>{{ payCondition.price + payCondition.deposit }}</span>元</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toPay">立即支付</el-button>
        <el-button @click="paymentDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getDate } from '@/utils/date';
export default {
  name: 'Members',
  filters: {
    formatDate: value => {
      if (!value) return '';
      const date = new Date(value);
      return getDate(date, '/');
    }
  },
  data() {
    return {
      tableData: [{
        name: '诚信商家会员专属标识',
        free: '无',
        credit: '有',
        brand: '有'
      }, {
        name: '品牌商家会员专属标识',
        free: '无',
        credit: '无',
        brand: '有'
      }, {
        name: '首页黄金展位，点击直达店铺',
        free: '无',
        credit: '无',
        brand: '有'
      }, {
        name: '专业顾问1对1开店培训，辅助商家完成商品上架',
        free: '无',
        credit: '有（1个月）',
        brand: '有'
      }, {
        name: '可上架商品数量',
        free: '10个',
        credit: '无限制',
        brand: '无限制'
      }, {
        name: '可查看数据统计',
        free: '无',
        credit: '有',
        brand: '有'
      }, {
        name: '可报名参加平台活动',
        free: '无',
        credit: '有',
        brand: '有'
      }, {
        name: '可发布活动数量',
        free: '无',
        credit: '10个',
        brand: '无限制'
      }, {
        name: '可发布优惠券数量',
        free: '无',
        credit: '10个',
        brand: '无限制'
      }, {
        name: '提现次数',
        free: '无',
        credit: '每月1次',
        brand: '无限制'
      }],
      paymentDialogVisible: false,
      agreeTreaty: false, // 是否勾选条款
      payments: [
        {
          logo: '',
          name: 'alipay',
          label: '支付宝支付'
        }, {
          logo: '',
          name: 'wechat',
          label: '微信支付'
        }, {
          logo: '',
          name: 'bank',
          label: '银行卡支付'
        }
      ],
      paymentIndex: 0,
      selectedPayment: '',
      payCondition: {} // 支付金额
    };
  },
  computed: {
    ...mapGetters(['shopInfo', 'members', 'renewMembersCondition'])
  },
  methods: {
    toPay() {
      if (!this.agreeTreaty) {
        this.$message({
          message: '请先阅读《佰材网会员协议》《佰材网保证金协议》并勾选',
          type: 'warning'
        });
        return;
      }
    },
    selectPayment(payment, index) {
      this.selectedPayment = payment.name;
      this.paymentIndex = index;
    },
    openDialog(type) {
      this.payCondition = this.renewMembersCondition[type];
      this.paymentDialogVisible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.members{
  background-color: #fff;
  font-size: $fontSizeBase;
  h2,h3{
    margin: 0;
    padding: 0;
  }
  &>h2{
      height: 60px;
      line-height: 60px;
      padding-left: 25px;
      border-bottom: 1px solid $borderColor;
      font-size: 14px;
      font-weight: bold;
      img{
        display: inline-block;
        width: 30px;
        height: auto;
        vertical-align: middle;
        margin-top: -3px;
      }
    }
  .parent-box{
    border-bottom: 1px solid $borderColor;
    &:last-child{
      border-bottom: none;
    }
    h2,h3{
      color: $textColorDark;
      font-size: $fontSizeLg;
    }
  .title{
    margin-bottom: 25px;
    h3{
      display: inline-block;
      margin-right: 10px;
    }
    span{
      color: $textColorBase;
    }
    &::before{
      content: "";
      display: inline-block;
      border: 2px solid $mainColor;
      border-radius: 2px;
      height: 12px;
      margin-right: 6px;
      vertical-align: middle;
      margin-top: -2px;
    }
  }
  }
  .parent-box,.rights,.open{
    width: 88%;
    margin: 0 auto;
  }
  .open,.rights{
    padding: 5% 0 3%;
  }
  .choice{
    display: flex;
    .credit,.brand{
      width: 347px;
      height: 100px;
      padding-left: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
    }
    .free{
      font-size: $fontSizeBig;
      display: flex;
      align-items: center;
      .to-open{
        display: inline-block;
        width: 100px;
        height: 36px;
        line-height: 36px;
        font-size: $fontSizeBase;
        color:#fff;
        text-align: center;
        border-radius: 3px;
        margin-left: 28px;
        cursor: pointer;
      }
    }
    .line{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .expire{
      margin: 8px 0 0;
      color: #4F515F;
      line-height: 20px;
    }
    .xufei{
      display: inline-block;
      width: 52px;
      height: 23px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
    .opened{
      display: block;
      width: 48px;
      height: 22px;
      background: url('../../../assets/images/label-opened.png') no-repeat center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      margin: 0;
    }
    .content{
      font-size: $fontSizeBig;
      font-weight: bolder;
      vertical-align: middle;
    }
    .credit{
      background-image: url('../../../assets/images/bg-member-credit.png');
      .free{
        color: $textColorDark;
      }
      .content{
        color: $textColorDark;
      }
      .to-open{
        background-color: #E2412E;
      }
      .xufei{
        height: 21px;
        background-image: url('../../../assets/images/member-btn-xufei-bg1.png');
      }
    }
    .brand{
      background-image: url('../../../assets/images/bg-member-brand.png');
      .free,.content{
        color: #F4BD4B;
      }
      .to-open{
        background: url('../../../assets/images/member-btn-open-bg.png');
      }
      .xufei{
        height: 21px;
        background-image: url('../../../assets/images/member-btn-xufei-bg.png');
      }
      .expire{
        color: #F6CA6C;
      }
    }
  }
  /deep/ .tb-header{
    th{
      background-color: $disabledColor;
      color: $textColorDark;
    }
  }
  /deep/ div.credit-label,
  /deep/ div.brand-label{
    &::before{
      display: inline-block;
      width: 14px;
      height: 14px;
      content: "";
      vertical-align: middle;
      margin-top: -2px;
      margin-right: 4px;
      background-size: cover;
    }
  }
  /deep/ div.brand-label{
    &::before{
      background: url('../../../assets/images/icon-R.png') no-repeat center;
    }
  }
  /deep/ div.credit-label{
    &::before{
      background: url('../../../assets/images/icon-cheng.png') no-repeat center;
    }
  }
}
.tb-header{
	background-color: #333;
}
.payment-dialog{
  color: $textColorBase;
  /deep/ .el-dialog{
    width: 40%;
    max-width: 630px;
  }
  /deep/ .el-dialog__header{
    border-bottom: 1px solid $borderColor;
    height: 50px;
    box-sizing: border-box;
    line-height: 50px;
    padding: 0 0 0 30px;
  }
  .dialog-title{
    font-size: $fontSizeLg;
    color: $textColorDark;
    text-align: left;
  }
  /deep/ .el-dialog--center .el-dialog__body{
    padding: 30px 50px 20px;
    box-sizing: border-box;
  }
  .info-box{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
    background-color: #FEF7EB;
    text-align: center;
    margin-bottom: 30px;
  }
  .title{
    background-color: #F56C6C;
    color: #fff;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin: 0;
  }
  .price{
    font-size: $fontSizeBig;
    color: $textColorDark;
    text-align: center;
    margin-top: 30px;
    span{
      font-size: 48px;
      color: #F2591D;
      font-weight: bolder;
      padding-right: 5px;
    }
  }
  .tips{
    margin-bottom: 25px;
  }
  /deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
    color: $textColorBase;
  }
  .treaty{
    color: $mainColor
  }
  .payment-box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 15px 0;
    p{
      flex: 0 0 70px;
      width: 70px;
    }
    li{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 18px;
      height: 36px;
      line-height: 36px;
      border: 1px solid $borderColor;
      border-radius: 3px;
      position: relative;
      cursor: pointer;
      span{
        padding-left: 6px;
      }
      .el-icon-check{
        display: block;
        position: absolute;
        right: -1px;
        bottom: -1px;
        color: transparent;
        font-size: $fontSizeSm;
        z-index: 2;
      }
      &.on{
        border-color: $mainColor;
        &::after{
          content: "";
          width: 0;
          height: 0;
          display: block;
          padding-left: 0;
          border: 8px solid transparent;
          border-right-color: $mainColor;
          border-bottom-color: $mainColor;
          position: absolute;
          right: 0;
          bottom: 0;
          text-align: center;
        }
        .el-icon-check{
          color: #fff;
        }
      }
    }
    ul{
      flex: 0 0 calc(100% - 70px);
      width: calc(100% - 70px);
      padding: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .total-price{
    margin-bottom: 0;
    span{
      color: #E9433A;
      font-size: $fontSizeLg;
      font-weight: bolder;
    }
  }
}
</style>
